import React from 'react';
import request from 'umi-request';
import { Select } from 'antd';
import { getProjectList } from '../storage/ProjectStorage';

export default class SelectGroup extends React.Component {
  state = {};

  componentDidMount() {
    request.get('/api/dict/list/province').then((response) => {
      this.setState({ provinceList: response.object });
    });
  }

  handleProjectChange = (e) => {
    const { deliverProject } = this.props;
    deliverProject(e);
  };

  handleProvinceChange = (e) => {
    const { deliverProvince } = this.props;
    deliverProvince(e);
  };

  render() {
    const { provinceList } = this.state;
    return (
      <div>
        <Select
          style={{ width: 120 }}
          allowClear
          placeholder="选择工程"
          onChange={this.handleProjectChange}
          showSearch
          defaultValue=""
          filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
        >
          <Select.Option value="" key="">
            全部工程
          </Select.Option>
          {getProjectList().map((item) => (
            <Select.Option value={item.key} key={item.key}>
              {item.value}
            </Select.Option>
          ))}
        </Select>
        <Select
          style={{ width: 120, marginLeft: 10 }}
          allowClear
          placeholder="选择省份"
          onChange={this.handleProvinceChange}
          showSearch
          defaultValue=""
          filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
        >
          <Select.Option value="" key="">
            全部省份
          </Select.Option>
          {provinceList
            && provinceList.map((item) => (
              <Select.Option value={item.key} key={item.key}>
                {item.value}
              </Select.Option>
            ))}
        </Select>
      </div>
    );
  }
}
